<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../../views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增医生</title>
<head>
<meta charset="utf-8">
<title>新增医生</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet"
	href="/fdoctor-ms/statics/beginnerAdmin/plugins/layui/css/layui.css"
	media="all" />
<link rel="stylesheet"
	href="/fdoctor-ms/statics/beginnerAdmin/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="/fdoctor-ms/statics/beginnerAdmin/css/btable.css" />
<link rel="stylesheet"
	href="/fdoctor-ms/statics/css/global.css" />
<link rel="stylesheet"
	href="/fdoctor-ms/statics/ztree/css/metroStyle/metroStyle.css" />
<link rel="stylesheet"
	href="/fdoctor-ms/statics/ztree/css/demo.css" />
<link rel="stylesheet" href="/fdoctor-ms/statics/css/global.css" />

<script type="text/javascript"
	src="/fdoctor-ms/statics/beginnerAdmin/plugins/layui/layui.js"></script>
<script type="text/javascript"
	src="/fdoctor-ms/statics/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/fdoctor-ms/statics/js/inputTools.js"></script>
<script type="text/javascript" src="/fdoctor-ms/statics/ztree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="/fdoctor-ms/statics/ztree/js/jquery.ztree.excheck.min.js"></script>
<%
	String webServerIp = PropertiesUtils.getValue("ftp_web_server_ip");
%>
</head>

	<SCRIPT type="text/javascript">
		var setting = {
			check: {
				enable: true,
				chkboxType: {"Y":"", "N":""}
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			}
		};

		function beforeClick(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("deptTree");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return false;
		}
		
		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("deptTree"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#deptSel");
			cityObj.attr("value", v);
		}

		function showMenu() {
			var cityObj = $("#deptSel");
			var cityOffset = $("#deptSel").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "deptSel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

	</SCRIPT>

<body>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 5px; margin-left: 5px; margin-right: 5px">
		<legend>新增医生 </legend>
	</fieldset>
	<input type="hidden" id="webServerIp" value="<%=webServerIp%>">
	<form class="layui-form" action="" id="dataForm">
		<div class="layui-form-item" style="width: 100%">
			<div class="layui-inline" style="width: 41%">
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">医生姓名:</label>
					<div class="layui-input-block">
						<input name="docName" class="layui-input" type="text" id="docName" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label" >性别:</label>
					<div class="layui-input-block">
						<select name="sex" id="sex" lay-verify="" >
							<option value="1" >男</option>
							<option value="2" >女</option>
						</select> 
					</div>
				</div>
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">电话号码:</label>
					<div class="layui-input-block">
				      <input name="phoneNumber" class="layui-input" type="text" id="phoneNumber" lay-verify="phone">
				    </div>
				</div>
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">职称:</label>
					<div class="layui-input-block">
						<input name="title" class="layui-input" type="text" id="title">
					</div>
				</div>
				
			</div>
			
			<!-- 医生头像（照片）选择 -->
			<div class="layui-inline" style="margin-left: 50px; width: 41%">
				<div class="layui-form-item" style="width: 230px; height: 230px">
					<div class="site-demo-upload">
						<input type="hidden" id="img_url" > 
						<img id="LAY_demo_upload"
							src="/fdoctor-ms/statics/image/defaultImg.png" width="100%"
							height="100%">
						<div class="site-demo-upbar">
							<input name="file" class="layui-upload-file" id="user_head_img" type="file">
						</div>
					</div>
				</div>

			</div>
			
			<div class="layui-inline" style="width: 41%">
				
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">账号:</label>
					<div class="layui-input-block">
				      <input name="userName" class="layui-input" type="text" id="userName" value="" lay-verify="userName" placeholder="需与基卫账号保持一致">
				    </div>
				</div>
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">所属医院:</label>
					<div class="layui-input-block">
						<select name="orgId"  id="orgId" lay-filter="orgId" lay-search>
						<option value="" >可输入医院名搜索</option>
						<option value="0" >全部</option>
				      	<c:forEach items="${hospitalList}" var="item">
				      		<option value="${item.id}">${item.orgName}</option>
				      	</c:forEach>
					</select> 
					</div>
				</div>
			</div>
			
			<div class="layui-inline" style="width: 41%">
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">密码:</label>
					<div class="layui-input-block">
				      <input name="password" class="layui-input" type="password" id="password" value="" lay-verify="password">
				    </div>
				</div>
				
				<div class="layui-form-item" style="width: 100%">
					<label class="layui-form-label">所属科室:</label>
					<div class="layui-input-block">
						<ul>
							<li class="title"><!--  <input id="deptSel" type="text" readonly value="" class="layui-input" onclick="showMenu();" />-->
								<input name="deptSel" class="layui-input" type="text" id="deptSel"  lay-verify="required">
							</li>
						</ul>
					</div>
				</div>
				
			</div>
		</div>
			<div class="layui-form-item" style="width: 50%">
			 	<label class="layui-form-label" > 医生角色:</label>
					<div class="layui-input-block">
						<select name="docType" id="docType" lay-verify="" lay-filter="docType">
							<option value="1" >医生</option>
							<option value="2">公卫医生</option>
							<option value="3">护士</option>
						</select> 
					</div>     
			    </div>
			</div>
			<div class="layui-form-item" style="width: 84.5%">
				<label class="layui-form-label">医生ID:</label>
				<div class="layui-input-block">
					<input name="docId" class="layui-input" type="text" id="docId" placeholder="医生ID需要与基卫ID保持一致,若为本地数据可不填">
				</div>
			</div>
			<div class="layui-form-item" style="width: 84.5%">
				<label class="layui-form-label">账号ID:</label>
				<div class="layui-input-block">
					<input name="docUserId" class="layui-input" type="text" id="docUserId" placeholder="账号ID需要与基卫ID保持一致,若为本地数据可不填">
				</div>
			</div>
			<div class="layui-form-item" style="width: 84.5%">
				<label class="layui-form-label">擅长领域:</label>
				<div class="layui-input-block">
					<input name="specialty" class="layui-input" type="text" id="specialty">
				</div>
			</div>
			<div class="layui-form-item" style="width: 84.5%">
				<label class="layui-form-label">医生简介:</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" class="layui-textarea" id="introduction"></textarea>
				</div>
			</div>
		</div>
		
		<hr>
	  <div align="center">
	  		<button class="layui-btn layui-btn-big layui-btn-primary layui-btn-radius" type="button" id="saveButton"><i class="layui-icon">&#xe618;</i>确认保存</button>
	  </div>
	</form>


<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
	<ul id="deptTree" class="ztree"></ul>
</div>

</body>
<script type="text/javascript">
	//初始化表单控件
	layui.use(
		[ 'jquery', 'form', 'laydate','upload' ],
		function() {
			$ = layui.jquery;
			form = layui.form();
			var laydate = layui.laydate;
			
			layui.upload({
				url : '/fdoctor-ms/common/imgUpload',
				elem : '#user_head_img' //指定原始元素，默认直接查找class="layui-upload-file"
					,
				method : 'post' //上传接口的http类型
				,
				success : function(res) {
					LAY_demo_upload.src = $('#webServerIp').val() + res.data;
					$('#img_url').val(res.data);
				}
			});
			
		     form.verify({
		    	  userName:function(value){ 
		    		  if(!/^[A-Za-z0-9]+$/.text(value)){
		    			  return '账号只能输入数字或字母';
		    		  }
		    	  },
		    	  password:function(value){ 
		    		  if(!/^[A-Za-z0-9]+$/.text(value)){
		    			  return '账号只能输入数字或字母';
		    		  }
		    	  }
		     })
			
			$('#saveButton').on('click', function(){
				if($('#docName').val() == null || $('#name').val() == ''){
					layer.msg('请输入医生姓名！',{icon: 7});
		    		return;
				}
				if($('#orgId').val() == 0){
					layer.msg('请选择医院！',{icon: 7});
		    		return;
				}
				if($('#deptSel').val() == null || $('#deptSel').val() == ''){
					layer.msg('请输入科室！',{icon: 7});
		    		return;
				}
				if($('#userName').val() == null || $('#userName').val() == ''){
					layer.msg('请输入账号！',{icon: 7});
		    		return;
				}
				if($('#password').val() == null || $('#password').val() == ''){
					layer.msg('请输入密码！',{icon: 7});
		    		return;
				}
				if($('#userName').val().match(/^[a-zA-Z0-9]+$/)==null){
					layer.msg('账号只能为数字或字母！',{icon: 7});
		    		return;
				}
				if($('#password').val().match(/^[a-zA-Z0-9]+$/)==null){
					layer.msg('密码只能为数字或字母！',{icon: 7});
		    		return;
				}
				
				/*var treeObj = $.fn.zTree.getZTreeObj("deptTree");
				var nodes = treeObj.getCheckedNodes(true);
				if(nodes.length == 0){
					layer.msg('请选择科室！',{icon: 7});
		    		return;
				}*/
				layer.confirm('确认保存？', {icon: 3,id : Math.ceil(100)}, function(index){
					/*var depts = '';
        			for(i = 0; i < nodes.length; i++){
        				depts += nodes[i].id + ',';
        			}'*/
        			$.ajax({
			 			type : 'POST',
			 			url : '/fdoctor-ms/doctor/saveDoctor',
			 			data : {
			 				docName : $('#docName').val(),
			 				phoneNumber : $('#phoneNumber').val(),
			 				title : $('#title').val(),
			 				orgId : $('#orgId').val(),
			 				sex : $('#sex').val(),
			 				docType : $('#docType').val(),
			 				specialty : $('#specialty').val(),
			 				introduction : $('#introduction').val(),
			 				deptName : $('#deptSel').val(),
			 				userName : $('#userName').val(), 
			 				password : $('#password').val(),
			 				docId : $('#docId').val(),
			 				docUserId : $('#docUserId').val(),
			 				img : $('#img_url').val()
			 					//depts.substring(0,depts.length-1)
			 			},
			 			success : function(data) {
			 				if(data.code == 200){
			 					var index = parent.layer.getFrameIndex(window.name);
			 					parent.layer.close(index);
			 					parent.layer.msg('保存成功！',{icon: 1});
			 					parent.tableConfig();
			 				}else{
			 					parent.layer.msg('保存失败！',{icon: 2});
			 				}
			 			}
			 		});
       			});
			})
		});
</script>
</html>